<script setup>
	import { getCurrentInstance, h, onMounted, ref } from 'vue'
	import Group from '@/components/Group/index.vue'
	import workflowApi from '@/api/workflow/workflowApi.js'
	import { message } from 'ant-design-vue'
	import {useRouter} from "vue-router";

	const props = defineProps(['hiddenFlag', 'id'])
	const keywords = ref()
	const currentGroupId = ref(0)
	const productId = ref()
	const tableRef = ref()
	const addFlag = ref(false)
	const router = useRouter()

	const workflowModel = ref({})
	const selectTree = (id, code, name) => {
		currentGroupId.value = id
		tableRef.value.refresh()
	}
	const columns = ref([
		{
			title: '名称',
			key: 'workflowName',
			dataIndex: 'workflowName',
			ellipsis: true
		},
		{
			title: '编码',
			key: 'workflowCode',
			dataIndex: 'workflowCode',
			ellipsis: true
		},
		{
			title: '操作',
			key: 'action',
			width: 220,
			dataIndex: 'action',
			ellipsis: true,
			fixed: 'right',
			buttonList: [
				{
					click: (field, record) => {
						handleConfig(record)
					},
					render: (record) => {
						return '配置'
					}
				},
				{
					click: (field, record) => {
						handleRemove(record)
					},
					render: (record) => {
						return '删除'
					}
				}
			]
		}
	])

	const handleConfig = (record) => {
		//打开工作流编排
		router.push({
			path: '/workflow/engine',
			query: {
				id: record.id
			}
		})
	}

	const handleRemove = async (record) => {
		let b = await workflowApi.removeById({ id: record.id })
		refresh()
	}

	const queryList = async () => {
		return await workflowApi.list({ groupId: currentGroupId.value })
	}
	const refresh = () => {
		tableRef.value.refresh()
	}
	onMounted(() => {})

	const save = async () => {
		if (!currentGroupId.value) {
			message.error('请选择分组')
			return
		}
		workflowModel.value.groupId = currentGroupId.value
		workflowModel.value.productId = productId.value

		let b = await workflowApi.save(workflowModel.value)

		addFlag.value = false

		refresh()
	}
</script>

<template>
	<a-row :gutter="10" class="mb-2" v-if="!props.hiddenFlag">
		<a-col :span="5" v-if="!props.id">
			<Group height="calc(71vh)" :selectTree="selectTree" relationTypeCode="WORKFLOW" :productId="productId"></Group>
		</a-col>
		<a-col :span="props.id ? 24 : 19">
			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<a-space>
							<a-input-search placeholder="请输入内容" v-model:value="keywords" @search="refresh"></a-input-search>
							<a-button
								type="primary"
								@click="
									addFlag = true;
									workflowModel = {}
								"
								>新增
							</a-button>
						</a-space>
					</a-card>
				</a-col>
			</a-row>

			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<h-table height="calc(70vh)" :columns="columns" ref="tableRef" :data="queryList"></h-table>
					</a-card>
				</a-col>
			</a-row>
		</a-col>
	</a-row>

	<a-modal v-model:open="addFlag" width="500px" :closable="false">
		<a-form :model="workflowModel">
			<a-form-item label="名称">
				<a-input v-model:value="workflowModel.workflowName" autocomplete="off"></a-input>
			</a-form-item>
			<a-form-item label="编码">
				<a-input v-model:value="workflowModel.workflowCode" autocomplete="off"></a-input>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="addFlag = false">取 消</a-button>
			<a-button type="primary" @click="save">确 定</a-button>
		</template>
	</a-modal>
</template>

<style scoped></style>
